<template>
  <div class="my-administrator">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header_my"
           @click="btn">&lt;&nbsp; 管理员身份认证</div>
      <div class="header_portrait">
        <div class="header_portrait_img">
          <img class="img"
               :src="imgter"
               alt="" />
        </div>
        <div class="header_portrait_login">{{name}}</div>
      </div>
    </div>

    <!-- 中间内容区域 -->
    <div class="content">
      <div class="verification">
        <div class="verification-i"></div>请输入您的用户名和密码进行认证
      </div>
      <van-form @submit="onMessage">
        <van-field v-model="user.username"
                   name="用户账号"
                   label="用户账号"
                   placeholder="用户账号"
                   :rules="[{ required: true, message: '请填写用户账号' }]" />
        <van-field v-model="user.password"
                   type="password"
                   name="用户密码"
                   label="用户密码"
                   placeholder="用户密码"
                   :rules="[{ required: true, message: '请填写用户密码' }]" />
        <!-- 提交按钮 -->
        <van-button size="large"
                    native-type="submit">提交认证</van-button>
      </van-form>
    </div>
  </div>
</template>
<script>
import { setItem, getItem } from '@/mock/wsm.js'
import { MyAdministrator } from '@/api/administrator'
export default {
  name: 'Administrator',
  components: {},
  props: {},
  data () {
    return {
      user: {
        username: '',
        password: '',
        imgter: '',
        name: ''
      }
    }
  },
  computed: {},
  watch: {},
  created () {
    this.userinfo()
  },
  mounted () { },
  methods: {
    userinfo () {
      const data = getItem('userinfo')
      console.log(data.avatar)
      this.imgter = data.avatar
      this.name = data.name
    },
    btn () {
      // 点击跳转至上次浏览页面
      // this.$router.go(-1)
      // 指定跳转地址
      this.$router.replace('/')
    },
    async onMessage (values) {
      console.log('submit', values)
      //   提交并请求登录
      try {
        const res = await MyAdministrator(this.user)
        this.$toast('提交成功')
        // 提交成功清除输入框内容
        this.user = ''
        // 登录成功后跳转回原来的页面
        this.$router.push('/my')
      } catch (err) {
        this.$toast('提交失败！')
      }
      //   4.根据请求响应结果处理后续操作
    },
  }
}
</script>

<style lang="less" scoped>
.my-administrator {
  background-color: #f8f8f8;

  // 头部区域
  .header {
    height: 430px;
    background-color: #1196db;
    color: #fff;
    position: relative;
    .header_my {
      position: absolute;
      top: 35px;
      left: 35px;
      font-size: 30px;
      font-weight: 700;
    }
    .header_portrait {
      position: absolute;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .header_portrait_img {
        width: 140px;
        height: 140px;
        background-color: #fff;
        border-radius: 50%;
        margin-bottom: 30px;
        .img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .header_portrait_login {
        font-size: 26px;
        font-weight: 700;
      }
      .header_portrait_login:hover {
        color: #a1afc9;
      }
    }
  }

  // 中间内容
  .content {
    position: absolute;
    left: 22px;
    top: 380px;
    background-color: #fff;
    border-radius: 3%;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 100);
    margin: 0 18px 20px 18px;

    .verification {
      height: 100px;
      width: 620px;
      border-bottom: 1px solid #ccc;
      margin-left: 30px;
      font-size: 30px;
      line-height: 100px;

      .verification-i {
        display: inline-block;
        width: 1px;
        height: 18px;
        border: 3px solid #1196db;
        background-color: #1196db;
        margin-right: 10px;
      }
    }
  }
  // 底部按钮
  .van-button {
    color: #fff;
    background-color: #1196db;
    margin-top: 80px;
  }
}
</style>
